<!-- 两化融合->贯标实施 -->
<template>
    <div class="content-wrapper a-base-container">
        <div class="implement-set-wrapper">
            <!-- 按钮 -->
            <div class="btn-wrapper clearfix">
                <a-row class="text-center clearfix">
                    <a-col :xs="24" :sm="24" :md="24" :lg="16" :xl="12">
                        <a-col :xs="btn_grid.xs" :sm="btn_grid.sm" :md="btn_grid.md" :lg="btn_grid.lg" :xl="btn_grid.xl">
                            <div class="btns" @click="submitServer">
                                <a-icon class="btns-icon" type="save" />
                                <div class="btns-text">保存</div>
                            </div>
                        </a-col>
                        <a-col :xs="btn_grid.xs" :sm="btn_grid.sm" :md="btn_grid.md" :lg="btn_grid.lg" :xl="btn_grid.xl">
                            <div class="btns" @click="clickDelete">
                                <a-icon class="btns-icon" type="delete" />
                                <div class="btns-text">删除</div>
                            </div>
                        </a-col>
                        <!-- <a-col :xs="btn_grid.xs" :sm="btn_grid.sm" :md="btn_grid.md" :lg="btn_grid.lg" :xl="btn_grid.xl">
                            <div class="btns" @click="clickEdit">
                                <a-icon class="btns-icon" type="edit" />
                                <div class="btns-text">修改</div>
                            </div>
                        </a-col> -->
                        <a-col :xs="btn_grid.xs" :sm="btn_grid.sm" :md="btn_grid.md" :lg="btn_grid.lg" :xl="btn_grid.xl">
                            <div class="btns" @click="auditClick(1)">
                                <a-icon class="btns-icon" type="audit" />
                                <div class="btns-text">审核</div>
                            </div>
                        </a-col>

                        <a-col :xs="btn_grid.xs" :sm="btn_grid.sm" :md="btn_grid.md" :lg="btn_grid.lg" :xl="btn_grid.xl">
                            <a class="btns" @click="clickNew">
                                <a-icon class="btns-icon" type="file-add" />
                                <div class="btns-text">新增</div>
                            </a>
                        </a-col>
                    </a-col>
                </a-row>
            </div>
            <div class="implement-wrapper">
                <div class="menu">
                    <ul>
                        <li :class="menuActive==0?'active':''" @click="getDataList(0)">企业信息</li>
                        <li :class="menuActive==1?'active':''" @click="getDataList(1)">贯标启动</li>
                        <li :class="menuActive==2?'active':''" @click="getDataList(2)">现状调研及诊断</li>
                        <li :class="menuActive==3?'active':''" @click="getDataList(3)">体系分析策划</li>
                        <li :class="menuActive==4?'active':''" @click="getDataList(4)">文件编写及发布</li>
                        <li :class="menuActive==5?'active':''" @click="getDataList(5)">体系试运行</li>
                        <li :class="menuActive==6?'active':''" @click="getDataList(6)">内部审核和管理评审</li>
                        <li :class="menuActive==7?'active':''" @click="getDataList(7)">满意度调查问卷</li>
                        <li :class="menuActive==8?'active':''" @click="getDataList(8)">评定申请</li>
                    </ul>
                </div>
                <div class="center-box">
                    <div class="center-menu" :ref="centerMenuRef">
                        <ul>
                            <li v-for="(item,index) in contentArray" :key="index" :class="item.id == nowId?'active':''" @click="choiceItem(item)">{{item.title}}</li>
                        </ul>
                    </div>
                    <div class="center-edit">
                        <a-form :layout="formLayout">
                            <a-form-item label="标题" :label-col="labelCol" :wrapper-col="wrapperCol">
                                <a-input v-model="title" placeholder="请输入标题" />
                            </a-form-item>
                            <a-form-item label="负责人" :label-col="labelCol" :wrapper-col="wrapperCol">
                                <input-group-search modalTitle="请选择负责人" rightStyle="width: 250px;margin-top: -45px;" treeType="officeUser" :valueTitle.sync="chargeUserName" v-model="chargeUserId" />
                            </a-form-item>
                            <a-form-item label="计划完成日期" :label-col="labelCol" :wrapper-col="wrapperCol">
                                <a-date-picker v-model="planDate" @change="onChange" />
                            </a-form-item>
                            <a-form-item label="协助人" :label-col="labelCol" :wrapper-col="wrapperCol" style="width:300px">
                                <a-input-search v-model="assistUserNames" read-only @click="() => (ccUserVisible=true)" @search="() => (ccUserVisible = true)" />
                            </a-form-item>
                        </a-form>
                        <vue-ueditor-wrap ref="ueditorRef" v-model="msg" :config="myConfig"></vue-ueditor-wrap>
                    </div>
                </div>

            </div>
        </div>

        <a-modal v-model="ccUserVisible" title="协助人选择" centered on-ok="handleok" width="300px">
            <div style="height: 400px;overflow-y:scroll;">
                <a-input-search style="margin-bottom: 8px" placeholder="输入用户名称" @change="onChangeAssist" />
                <div v-show="treeAShow">
                    <a-tree v-model="checkedUserKeys" :tree-data="userSearchData" :show-icon="true" :expanded-keys="expandedUserKeys" @expand="expanedChange" :defaultExpandAll="true" checkable @check="userCheck">
                        <a-icon slot="user" type="user" />
                    </a-tree>
                </div>
                <div v-show="treeBShow">
                    <a-tree v-model="checkedUserKeys" :tree-data="userAllData" :show-icon="true" checkable :defaultExpandAll="true" @check="userCheck">
                        <a-icon slot="user" type="user" />
                    </a-tree>
                </div>
            </div>
            <template slot="footer">
                <a-button key="submit" type="primary" @click="() => (ccUserVisible = false)">确定</a-button>
                <a-button key="back" @click="() => (ccUserVisible = false)">关闭</a-button>
            </template>
        </a-modal>

    </div>
</template>
<script>
import { TreeDataOffice } from "@/api/office";
import { officeUserListToTree, searchInTreeData } from "@/utils/tree";

import { save, examine, remove, getList, details } from '@/api/integration/implementation'
import VueUeditorWrap from 'vue-ueditor-wrap'
export default {
    components: {
        VueUeditorWrap
    },
    data() {
        return {
            msg: '',
            myConfig: {
                // 编辑器不自动被内容撑高
                autoHeightEnabled: false,
                // 初始容器高度
                initialFrameHeight: 300,
                // 初始容器宽度
                initialFrameWidth: '100%',
                // 上传文件接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用！！！）
                //serverUrl: 'http://35.201.165.105:8000/controller.php',
                serverUrl: this.$Global.ApiBaseUrl + '/editorUpload',
                // UEditor 资源文件的存放路径，如果你使用的是 vue-cli 生成的项目，通常不需要设置该选项，vue-ueditor-wrap 会自动处理常见的情况，如果需要特殊配置，参考下方的常见问题2
                UEDITOR_HOME_URL: '/UEditor/'
            },
            //----------↓样式----------
            btn_grid: {
                xs: 2,
                sm: 2,
                md: 2,
                lg: 2,
                xl: 2
            },
            formLayout: "inline",
            labelCol: { span: 8 },
            wrapperCol: { span: 16 },
            //----------↑样式----------

            menuActive: 0,
            contentArray: [
                {
                    title: '任命书',
                    principal: '负责人',
                    assist: '协助',
                    content: 'asdofjsaidjfoisdaf'
                },
                {
                    title: '组织架构',
                    principal: '负责人',
                    assist: '协助',
                    content: 'asdofjsaidjfoisdaf'
                },
                {
                    title: '贯标计划',
                    principal: '负责人',
                    assist: '协助',
                    content: 'asdofjsaidjfoisdaf'
                },
                {
                    title: '培训记录',
                    principal: '负责人',
                    assist: '协助',
                    content: 'asdofjsaidjfoisdaf'
                }
            ],
            isSaveRun: true,
            title: '',//标题
            assistUserNames: '',//协助人
            assistUserIds: '',   //协助人id

            chargeUserName: '', //负责人
            chargeUserId: '',   //负责人id
            checkedUserKeys: [], //用户tree keys

            planDate: '',       //计划完成日期
            status: 0,         //状态

            ccUserVisible: false, //协助人弹窗

            userAllData: [], //用户所有tree数据
            userSearchData: [], //用户搜索数据
            treeAShow: false, //搜索用户tree
            treeBShow: true, //用户tree
            expandedUserKeys: [],


            nowId: null,//当前选择的id
        };
    },
    mounted() {
        TreeDataOffice({ isLoadUser: 2 }).then(response => {
            const { data } = response;
            const childrenNav = [];
            officeUserListToTree(data, childrenNav, "0");
            this.userAllData = childrenNav;
            this.userSearchData = childrenNav;
        });
        let _this = this;

        //编辑器高度自适应
        setTimeout(()=>{
            this.editorHeightAdaptive();
        },280)

        window.onresize = () => {
            this.editorHeightAdaptive();
        }
    },
    created() {
        this.getDataList(0);
    },
    methods: {
        //新增
        clickNew() {
            this.removeData();
        },
        //列表
        getDataList(type) {
            this.menuActive = type;
            getList({ type: type }).then(response => {
                if (response.code === 200) {
                    this.contentArray = response.data;
                } else {
                    this.$message.error(response.message);
                }
            }).catch((e) => {

            })
        },
        //保存
        submitServer() {
            let requestData = {
                title: this.title,//标题
                assistUserNames: this.assistUserNames,//协助人
                assistUserIds: this.assistUserIds,
                chargeUserName: this.chargeUserName,//负责人
                chargeUserId: this.chargeUserId,
                planDate: this.planDate,//计划完成日期
                content: this.msg,
                status: this.status,//状态
                type: this.menuActive,
                id: this.nowId,
            }
            if (!this.title) {
                this.$message.warning('标题必须填写');
                return;
            }
            if (this.isSaveRun) {
                this.isSaveRun = false;
                save(requestData).then(response => {
                    this.isSaveRun = true;
                    if (response.code === 200) {
                        this.$message.success('保存成功');
                        this.removeData();
                        this.getDataList(this.menuActive);

                    } else {
                        this.$message.error(response.message);
                    }
                }).catch((e) => {
                    this.isSaveRun = true;
                })
            }

        },
        //审核
        auditClick(type) {
            if (!this.nowId) {
                this.$message.warning('请选择一条数据');
                return;
            }
            let requestData = {
                id: this.nowId,
                status: type
            }
            examine(requestData).then((response) => {
                if (response.code === 200) {
                    const backData = response.data;
                    if (type == 1) {
                        this.$message.success('审核成功');
                        this.getDataList(this.menuActive);
                    }
                    if (type == 0) {
                        this.$message.success('弃审成功');
                        this.getDataList(this.menuActive);
                    }
                } else {
                    // this.$message.warning(response.message);
                }
            })
        },
        //删除
        clickDelete() {
            if (!this.nowId) {
                this.$message.warning('请选择一条数据');
                return;
            }
            let _this = this;
            _this.$confirm({
                title: "确认",
                content: (
                    <span>
                        您确定要{<span style="color:red;">删除</span>}该条单据吗？
                    </span>
                ),
                onOk() {
                    remove({ id: _this.nowId }).then(response => {
                        if (response.code === 200) {
                            _this.$message.success('删除成功');
                            _this.removeData();
                            _this.getDataList(_this.menuActive);
                        } else {
                            _this.$message.error(response.message);
                        }
                    })
                },
                onCancel() { },
            });



        },
        //清空数据
        removeData() {
            this.nowId = null;
            this.title = '';//标题
            this.assistUserNames = '';//协助人
            this.assistUserIds = '';
            this.chargeUserName = '';//负责人
            this.chargeUserId = '';
            this.planDate = '';//计划完成日期
            this.msg = '';
            this.checkedUserKeys = [];
        },
        //修改
        clickEdit() {
            let data = {
                sourceCode: this.sourceCode
            }
            getCode(data).then((res) => {
                if (res.code == 200) {
                    console.log(res);
                    this.receiptNumber = res.message;
                    console.log(this.orderHeaderData)
                    for (let i = 0; i < this.orderHeaderData.length; i++) {
                        if (this.orderHeaderData[i].code == 'voucherCode') {
                            this.$set(this.orderHeaderData[i], 'onEdit', false)
                            this.$set(this.orderHeaderData[i], 'value', this.receiptNumber)
                        }
                    }
                } else {
                    // this.$message.warning(res.message);
                }
            });
        },
        //协助人选择
        onChangeAssist(e) {
            const value = e.target.value;
            console.log(value);
            if (value) {
                this.treeAShow = true;
                this.treeBShow = false;
                const keys = [];
                const treeData = searchInTreeData(keys, this.userAllData, "title", value);
                this.userSearchData = treeData;
                this.expandedUserKeys = keys;
            } else {
                this.treeAShow = false;
                this.treeBShow = true;
                //this.areaTreeData = treeAreaData;
                this.expandedUserKeys = [];
            }
        },
        //计划完成日期
        onChange(date, dateString) {
            console.log(date, dateString);
            this.planDate = dateString;
        },
        //用户tree展开
        expanedChange(key, info) {
            this.expandedUserKeys = key;
        },
        //用户tree选择
        userCheck(keys, info) {
            console.log(this.checkedUserKeys);
            this.assistUserNames = "";
            this.assistUserIds = "";
            if (info.checkedNodes.length > 0) {
                for (let i = 0; i < info.checkedNodes.length; i++) {
                    const id = info.checkedNodes[i].data.props.id;
                    const name = info.checkedNodes[i].data.props.name;
                    if (id.indexOf("user") != -1) {
                        this.assistUserNames += name + ",";
                        this.assistUserIds += id.split("_")[0] + ",";
                    }
                }
                this.assistUserNames = this.assistUserNames.slice(
                    0,
                    this.assistUserNames.length - 1
                );
                this.assistUserIds = this.assistUserIds.slice(0, this.assistUserIds.length - 1);
            }
        },
        //当前选择数据
        choiceItem(item) {
            this.nowId = item.id;
            this.title = item.title;//标题
            this.assistUserNames = item.assistUserNames;//协助人
            this.assistUserIds = item.assistUserIds;
            this.chargeUserName = item.chargeUserName;//负责人
            this.chargeUserId = item.chargeUserId;
            this.planDate = item.planDate;//计划完成日期
            this.msg = item.content;
        },
        //编辑器高度自适应
        editorHeightAdaptive() {
            let h = document.body.clientHeight;//当前可视窗口高度
            let location = this.$refs.ueditorRef.$el.getBoundingClientRect();
            let editor = document.getElementsByClassName('edui-editor-iframeholder')[0];
            editor.style.height = h - location.top - editor.offsetTop - 30 + 'px';
        }
    }
};
</script>
<style lang="less">
.btn-wrapper {
    // min-height: 52px;
    padding: 4px 0px;
    background: #eee;
    border-bottom: 1px solid rgba(173, 173, 173, 0.5);
    margin-bottom: 5px;
    .btns {
        font-size: 14px;
        cursor: pointer;
        overflow: hidden;
    }
    .btns-ccc {
        color: #ccc;
    }
    .btns-text {
        margin-top: -2px;
        height: 20px;
        overflow: hidden;
        .anticon-down {
            color: rgb(24, 144, 255);
            vertical-align: middle;
        }
    }
    .btns-icon {
        font-size: 22px;
        color: rgb(24, 144, 255);
    }
    .btns-icon-ccc {
        color: #ccc;
    }
    .btns:hover {
        .btns-icon {
            color: rgb(45, 85, 216);
        }
        font-size: 14px;
        transition: all 0.2s;
    }
    .btns:active {
        animation: btns-transform 0.1s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
    }
    .field-prev,
    .field-next,
    .field-first,
    .field-last {
        position: absolute;
        z-index: 24;
        top: 4px;
        cursor: pointer;
        color: #40a9ff;
        background: #fff;
        width: 50px;
        line-height: 32px;
        box-shadow: 2px 2px 10px 2px #e0e0e0;
    }
    .field-first {
        right: 200px;
        font-weight: bold;
    }
    .field-prev {
        right: 140px;
    }
    .field-next {
        right: 80px;
    }
    .field-last {
        right: 20px;
    }

    //按钮制灰
    .btns-disable {
        color: #7f7d7d;
        .btns-icon {
            color: #7f7d7d;
        }
        .btns:hover {
            .btns-icon {
                color: #7f7d7d;
            }
        }
        .btns-text {
            color: #7f7d7d;
            .anticon-down {
                color: #7f7d7d;
            }
        }
    }
}

@keyframes btns-transform {
    10%,
    90% {
        transform: (translate3d(-1px, 0px, 0));
    }
    20%,
    80% {
        transform: (translate3d(2px, 0px, 5px));
    }
    30%,
    50%,
    70% {
        transform: (translate3d(-4px, 0px, -8px));
    }
    40%,
    60% {
        transform: (translate3d(4px, 0px, 8px));
    }
}
.implement-set-wrapper {
    height: 100%;
}
.implement-set-wrapper .btn-wrapper {
    margin-bottom: 0px;
}
.implement-wrapper {
    height: 100%;
    font-size: 14px;
    .menu ul {
        padding: 0px;
        margin-bottom: 0px;
        display: flex;
        cursor: pointer;
        .active {
            background: rgb(0, 146, 190);
            color: #fff;
        }
    }
    .menu ul > li {
        height: 40px;
        line-height: 40px;
        list-style: none;
        text-align: center;
        flex: 1;
        border-bottom: 1px solid #ccc;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        border-right: 1px solid #ccc;
    }
    .menu ul > li:last-child {
        border-right: 0;
    }
    .center-box {
        display: flex;
        overflow-y: auto;
        // padding: 0 10px;
        height: calc(100% - 90px);
        .center-menu {
            flex: 0 0 200px;
            border-right: 1px solid #ccc;
            overflow-y: auto;
            ul {
                padding: 0;
            }
            li {
                list-style: none;
                line-height: 18px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                cursor: pointer;
                padding: 5px;
                &.active {
                    background: rgba(0, 146, 190, 0.2);
                    color: rgb(0, 146, 190);
                }
            }
            li:hover {
                color: rgba(0, 146, 190, 1);
                background: rgba(0, 146, 190, 0.1);
            }
        }
        .center-edit {
            padding: 10px;
            flex: 1;
        }
    }
    .ant-input-group {
        width: 80%;
    }
}
</style>